<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>现代前端框架对比：React、Vue和Angular的优劣势分析 - BlogHub</title>
    <link href="../../assets/css/tailwind.css" rel="stylesheet">
    <link href="../../assets/css/font-awesome.min.css" rel="stylesheet">
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .card-hover {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
            .comment-line {
                position: relative;
            }
            .comment-line::before {
                content: '';
                position: absolute;
                left: 19px;
                top: 40px;
                bottom: 0;
                width: 2px;
                background-color: #e5e7eb;
            }
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800 font-sans">
    <!-- 导航栏 -->
    <header class="sticky top-0 z-50 bg-white shadow-sm transition-all duration-300">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center py-4">
                <!-- 网站Logo -->
                <div class="flex items-center space-x-2">
                    <i class="fa fa-pencil-square-o text-2xl text-blue-600" aria-hidden="true"></i>
                    <span class="text-xl font-bold text-gray-900">BlogHub</span>
                </div>
                
                <!-- 导航链接 - 桌面端 -->
                <nav class="hidden md:flex items-center space-x-8">
                    <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">首页</a>
                    <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">分类</a>
                    <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">热门</a>
                    <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">最新</a>
                    <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">关于</a>
                </nav>
                
                <!-- 搜索和用户按钮 -->
                <div class="flex items-center space-x-4">
                    <button class="text-gray-600 hover:text-blue-600 transition-colors">
                        <i class="fa fa-search text-lg" aria-hidden="true"></i>
                    </button>
                    <button class="hidden sm:block text-gray-600 hover:text-blue-600 transition-colors">
                        <i class="fa fa-user-circle-o text-lg" aria-hidden="true"></i>
                    </button>
                    <!-- 移动端菜单按钮 -->
                    <button class="md:hidden text-gray-600 hover:text-blue-600 transition-colors" id="menu-toggle">
                        <i class="fa fa-bars text-xl" aria-hidden="true"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div class="md:hidden hidden bg-white border-t" id="mobile-menu">
            <div class="container mx-auto px-4 py-3 space-y-3">
                <a href="#" class="block text-blue-600 font-medium py-2">首页</a>
                <a href="#" class="block text-gray-600 hover:text-blue-600 py-2">分类</a>
                <a href="#" class="block text-gray-600 hover:text-blue-600 py-2">热门</a>
                <a href="#" class="block text-gray-600 hover:text-blue-600 py-2">最新</a>
                <a href="#" class="block text-gray-600 hover:text-blue-600 py-2">关于</a>
            </div>
        </div>
    </header>

    <!-- 文章详情区 -->
    <main class="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="flex flex-col lg:flex-row gap-12">
            <!-- 文章主体 -->
            <article class="lg:w-2/3">
                <!-- 文章头部 -->
                <div class="mb-8">
                    <div class="flex items-center mb-4">
                        <span class="bg-blue-100 text-blue-800 text-xs font-medium px-3 py-1 rounded-full">技术</span>
                        <span class="ml-3 text-gray-500 text-sm">2023-06-15 · 12 分钟阅读</span>
                    </div>
                    <h1 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">现代前端框架对比：React、Vue和Angular的优劣势分析</h1>
                    
                    <div class="flex items-center mb-6">
                        <img src="https://picsum.photos/id/64/100/100" alt="作者头像" class="w-12 h-12 rounded-full object-cover">
                        <div class="ml-4">
                            <p class="text-lg font-medium text-gray-900">张开发</p>
                            <p class="text-gray-500">前端架构师 · 关注前端技术发展</p>
                        </div>
                        <div class="ml-auto flex space-x-4">
                            <button class="text-gray-500 hover:text-blue-600 transition-colors">
                                <i class="fa fa-twitter text-xl" aria-hidden="true"></i>
                            </button>
                            <button class="text-gray-500 hover:text-blue-600 transition-colors">
                                <i class="fa fa-facebook text-xl" aria-hidden="true"></i>
                            </button>
                            <button class="text-gray-500 hover:text-blue-600 transition-colors">
                                <i class="fa fa-linkedin text-xl" aria-hidden="true"></i>
                            </button>
                            <button class="text-gray-500 hover:text-blue-600 transition-colors">
                                <i class="fa fa-envelope-o text-xl" aria-hidden="true"></i>
                            </button>
                        </div>
                    </div>
                    
                    <img src="https://picsum.photos/id/24/1200/600" alt="文章封面图" class="w-full h-auto rounded-xl mb-6">
                    
                    <div class="flex items-center justify-between border-t border-b border-gray-100 py-4">
                        <div class="flex items-center space-x-4">
                            <button class="flex items-center text-gray-500 hover:text-red-500 transition-colors">
                                <i class="fa fa-heart-o mr-2" aria-hidden="true"></i>
                                <span>248</span>
                            </button>
                            <button class="flex items-center text-gray-500 hover:text-blue-500 transition-colors">
                                <i class="fa fa-comment-o mr-2" aria-hidden="true"></i>
                                <span>56</span>
                            </button>
                            <button class="flex items-center text-gray-500 hover:text-blue-500 transition-colors">
                                <i class="fa fa-bookmark-o mr-2" aria-hidden="true"></i>
                                <span>收藏</span>
                            </button>
                        </div>
                        <div class="flex items-center space-x-4">
                            <span class="text-gray-500">阅读: 12.4k</span>
                            <span class="text-gray-500">分享: 324</span>
                        </div>
                    </div>
                </div>
                
                <!-- 文章内容 -->
                <div class="prose prose-lg max-w-none mb-12">
                    <p class="lead text-lg text-gray-700 mb-6">本文深入探讨了当前主流前端框架的特点，从性能、学习曲线、生态系统和适用场景等多个维度进行对比分析，帮助开发者根据项目需求选择最合适的技术栈。</p>
                    
                    <h2 class="text-2xl font-bold text-gray-900 mb-4">引言</h2>
                    
                    <p>随着Web应用的复杂度不断提高，前端框架已经成为现代Web开发的必备工具。React、Vue和Angular作为目前最流行的三大前端框架，各自拥有独特的设计理念和适用场景。本文将对这三个框架进行全面对比，帮助开发者在选择技术栈时做出更明智的决策。</p>
                    
                    <h2 class="text-2xl font-bold text-gray-900 mt-8 mb-4">框架概述</h2>
                    
                    <h3 class="text-xl font-bold text-gray-900 mt-6 mb-3">React</h3>
                    
                    <p>React是由Facebook开发并维护的JavaScript库，用于构建用户界面。它采用虚拟DOM、组件化和单向数据流的设计理念，使得代码更加可维护和可测试。React生态系统非常丰富，拥有大量的第三方库和工具，如Redux、React Router等。</p>
                    
                    <blockquote class="border-l-4 border-blue-500 pl-4 italic my-6">
                        <p>"React使创建交互式UI变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时React能高效更新并渲染合适的组件。"</p>
                    </blockquote>
                    
                    <h3 class="text-xl font-bold text-gray-900 mt-6 mb-3">Vue</h3>
                    
                    <p>Vue是一个渐进式JavaScript框架，由尤雨溪开发。它的设计目标是易于上手、灵活且高效。Vue采用响应式原理和组件化架构，同时提供了简洁的API和优秀的文档。Vue的学习曲线较为平缓，适合初学者快速入门。</p>
                    
                    <h3 class="text-xl font-bold text-gray-900 mt-6 mb-3">Angular</h3>
                    
                    <p>Angular是由Google开发和维护的完整前端框架。它提供了一套全面的解决方案，包括模板、路由、表单验证、依赖注入等。Angular采用TypeScript作为主要编程语言，强调强类型和工程化，适合大型企业级应用开发。</p>
                    
                    <h2 class="text-2xl font-bold text-gray-900 mt-8 mb-4">性能对比</h2>
                    
                    <p>在性能方面，三个框架都有不错的表现，但在不同场景下可能会有差异。React通过虚拟DOM和批量更新机制提高渲染效率，Vue采用细粒度的响应式系统，而Angular则通过AOT编译和Zone.js实现变更检测。</p>
                    
                    <div class="bg-gray-50 rounded-lg p-6 my-8">
                        <h4 class="font-bold text-gray-900 mb-4">性能测试结果</h4>
                        <ul class="space-y-2">
                            <li class="flex items-center">
                                <span class="w-32">React:</span>
                                <div class="flex-grow bg-gray-200 rounded-full h-2.5">
                                    <div class="bg-blue-600 h-2.5 rounded-full" style="width: 85%"></div>
                                </div>
                                <span class="ml-4 font-medium">85%</span>
                            </li>
                            <li class="flex items-center">
                                <span class="w-32">Vue:</span>
                                <div class="flex-grow bg-gray-200 rounded-full h-2.5">
                                    <div class="bg-green-600 h-2.5 rounded-full" style="width: 90%"></div>
                                </div>
                                <span class="ml-4 font-medium">90%</span>
                            </li>
                            <li class="flex items-center">
                                <span class="w-32">Angular:</span>
                                <div class="flex-grow bg-gray-200 rounded-full h-2.5">
                                    <div class="bg-red-600 h-2.5 rounded-full" style="width: 80%"></div>
                                </div>
                                <span class="ml-4 font-medium">80%</span>
                            </li>
                        </ul>
                    </div>
                    
                    <h2 class="text-2xl font-bold text-gray-900 mt-8 mb-4">学习曲线</h2>
                    
                    <p>对于初学者来说，学习曲线是选择框架时的重要考虑因素。Vue因其简单易懂的API和清晰的文档而被认为是最容易上手的框架。React的概念相对容易理解，但需要学习JSX和函数式编程范式。Angular由于其全面的特性和TypeScript的使用，学习曲线最为陡峭。</p>
                    
                    <h2 class="text-2xl font-bold text-gray-900 mt-8 mb-4">生态系统</h2>
                    
                    <p>生态系统的丰富程度直接影响开发效率和项目可维护性。React拥有最庞大的开发者社区和第三方库，Vue的生态系统也在迅速发展，而Angular则提供了官方支持的全套解决方案。</p>
                    
                    <h2 class="text-2xl font-bold text-gray-900 mt-8 mb-4">适用场景</h2>
                    
                    <p>根据项目需求和团队情况，选择合适的框架至关重要：</p>
                    
                    <ul class="list-disc pl-5 my-6 space-y-2">
                        <li><strong>React</strong>: 适合大型应用、需要高性能的场景，以及需要与其他技术栈集成的项目。</li>
                        <li><strong>Vue</strong>: 适合中小型应用、快速迭代的项目，以及初学者友好的开发环境。</li>
                        <li><strong>Angular</strong>: 适合大型企业级应用、需要强类型和全面解决方案的项目。</li>
                    </ul>
                    
                    <h2 class="text-2xl font-bold text-gray-900 mt-8 mb-4">结论</h2>
                    
                    <p>React、Vue和Angular都是优秀的前端框架，各自有其独特的优势和适用场景。选择哪个框架取决于项目需求、团队技术栈和个人偏好。希望本文的对比分析能帮助你做出更合适的决策。</p>
                </div>
                
                <!-- 标签 -->
                <div class="border-t border-b border-gray-100 py-6 mb-12">
                    <div class="flex flex-wrap gap-2">
                        <span class="text-gray-700 font-medium">标签:</span>
                        <a href="#" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-full text-sm transition-colors">JavaScript</a>
                        <a href="#" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-full text-sm transition-colors">前端开发</a>
                        <a href="#" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-full text-sm transition-colors">React</a>
                        <a href="#" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-full text-sm transition-colors">Vue</a>
                        <a href="#" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-full text-sm transition-colors">Angular</a>
                    </div>
                </div>
                
                <!-- 作者信息 -->
                <div class="bg-gray-50 rounded-xl p-6 mb-12">
                    <div class="flex flex-col md:flex-row items-center">
                        <img src="https://picsum.photos/id/64/100/100" alt="作者头像" class="w-20 h-20 rounded-full object-cover mb-4 md:mb-0">
                        <div class="md:ml-6 text-center md:text-left">
                            <h3 class="text-xl font-bold text-gray-900 mb-1">张开发</h3>
                            <p class="text-gray-600 mb-3">前端架构师 · 关注前端技术发展</p>
                            <p class="text-gray-600 mb-4">10年Web开发经验，曾就职于多家知名科技公司，现致力于前端技术研究和团队管理。</p>
                            <div class="flex justify-center md:justify-start space-x-3">
                                <a href="#" class="text-gray-500 hover:text-blue-600 transition-colors">
                                    <i class="fa fa-twitter" aria-hidden="true"></i>
                                </a>
                                <a href="#" class="text-gray-500 hover:text-blue-600 transition-colors">
                                    <i class="fa fa-github" aria-hidden="true"></i>
                                </a>
                                <a href="#" class="text-gray-500 hover:text-blue-600 transition-colors">
                                    <i class="fa fa-linkedin" aria-hidden="true"></i>
                                </a>
                                <a href="#" class="text-gray-500 hover:text-blue-600 transition-colors">
                                    <i class="fa fa-globe" aria-hidden="true"></i>
                                </a>
                            </div>
                        </div>
                        <div class="mt-4 md:mt-0 md:ml-auto">
                            <button class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2 rounded-lg transition-colors">
                                关注作者
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 评论区 -->
                <div class="mb-12">
                    <div class="flex justify-between items-center mb-8">
                        <h2 class="text-2xl font-bold text-gray-900">评论 (56)</h2>
                        <div class="flex items-center">
                            <span class="text-gray-500 mr-2">排序:</span>
                            <select class="bg-white border border-gray-300 text-gray-700 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option>最新</option>
                                <option>热门</option>
                                <option>最早</option>
                            </select>
                        </div>
                    </div>
                    
                    <!-- 评论输入框 -->
                    <div class="bg-white rounded-xl p-6 mb-8 shadow-sm">
                        <div class="flex">
                            <img src="https://picsum.photos/id/177/100/100" alt="用户头像" class="w-10 h-10 rounded-full object-cover mr-4">
                            <div class="flex-grow">
                                <textarea placeholder="分享你的想法..." class="w-full border border-gray-200 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none" rows="3"></textarea>
                                <div class="flex justify-between items-center mt-3">
                                    <div class="flex space-x-3">
                                        <button class="text-gray-500 hover:text-blue-600 transition-colors">
                                            <i class="fa fa-image text-lg" aria-hidden="true"></i>
                                        </button>
                                        <button class="text-gray-500 hover:text-blue-600 transition-colors">
                                            <i class="fa fa-smile-o text-lg" aria-hidden="true"></i>
                                        </button>
                                        <button class="text-gray-500 hover:text-blue-600 transition-colors">
                                            <i class="fa fa-code text-lg" aria-hidden="true"></i>
                                        </button>
                                    </div>
                                    <button class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2 rounded-lg transition-colors">
                                        发表评论
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 评论列表 -->
                    <div class="space-y-6">
                        <!-- 评论 1 -->
                        <div class="bg-white rounded-xl p-6 shadow-sm">
                            <div class="flex">
                                <img src="https://picsum.photos/id/1027/100/100" alt="评论用户头像" class="w-10 h-10 rounded-full object-cover mr-4">
                                <div class="flex-grow">
                                    <div class="flex justify-between items-start">
                                        <div>
                                            <h4 class="font-medium text-gray-900">李技术</h4>
                                            <p class="text-gray-500 text-sm">2天前</p>
                                        </div>
                                        <button class="text-gray-400 hover:text-gray-600 transition-colors">
                                            <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
                                        </button>
                                    </div>
                                    <div class="mt-2">
                                        <p class="text-gray-700">非常全面的对比分析！我认为选择框架时还应该考虑团队的技术栈和项目的长期维护成本。React的生态系统确实非常丰富，但学习曲线也相对较陡。Vue则在易用性和性能之间取得了很好的平衡。</p>
                                    </div>
                                    <div class="flex items-center mt-4 space-x-4">
                                        <button class="flex items-center text-gray-500 hover:text-red-500 transition-colors">
                                            <i class="fa fa-heart-o mr-1" aria-hidden="true"></i>
                                            <span>32</span>
                                        </button>
                                        <button class="flex items-center text-gray-500 hover:text-blue-500 transition-colors">
                                            <i class="fa fa-reply mr-1" aria-hidden="true"></i>
                                            <span>回复</span>
                                        </button>
                                    </div>
                                    
                                    <!-- 子评论 -->
                                    <div class="mt-6 ml-10 pl-4 border-l-2 border-gray-100 space-y-6">
                                        <!-- 子评论 1 -->
                                        <div>
                                            <div class="flex">
                                                <img src="https://picsum.photos/id/64/100/100" alt="回复用户头像" class="w-8 h-8 rounded-full object-cover mr-3">
                                                <div class="flex-grow">
                                                    <div class="flex justify-between items-start">
                                                        <div>
                                                            <h4 class="font-medium text-gray-900">张开发 (作者)</h4>
                                                            <p class="text-gray-500 text-sm">1天前</p>
                                                        </div>
                                                        <button class="text-gray-400 hover:text-gray-600 transition-colors">
                                                            <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
                                                        </button>
                                                    </div>
                                                    <div class="mt-2">
                                                        <p class="text-gray-700">感谢您的补充！确实，团队技术栈和项目维护成本是选择框架时需要考虑的重要因素。我在文章中也提到了Angular更适合大型企业级应用，这也是因为它提供了更全面的解决方案和更好的长期维护支持。</p>
                                                    </div>
                                                    <div class="flex items-center mt-4 space-x-4">
                                                        <button class="flex items-center text-gray-500 hover:text-red-500 transition-colors">
                                                            <i class="fa fa-heart-o mr-1" aria-hidden="true"></i>
                                                            <span>18</span>
                                                        </button>
                                                        <button class="flex items-center text-gray-500 hover:text-blue-500 transition-colors">
                                                            <i class="fa fa-reply mr-1" aria-hidden="true"></i>
                                                            <span>回复</span>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 评论 2 -->
                        <div class="bg-white rounded-xl p-6 shadow-sm">
                            <div class="flex">
                                <img src="https://picsum.photos/id/1012/100/100" alt="评论用户头像" class="w-10 h-10 rounded-full object-cover mr-4">
                                <div class="flex-grow">
                                    <div class="flex justify-between items-start">
                                        <div>
                                            <h4 class="font-medium text-gray-900">王前端</h4>
                                            <p class="text-gray-500 text-sm">3天前</p>
                                        </div>
                                        <button class="text-gray-400 hover:text-gray-600 transition-colors">
                                            <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
                                        </button>
                                    </div>
                                    <div class="mt-2">
                                        <p class="text-gray-700">作为一个初学者，我发现Vue确实是最容易上手的框架。文档清晰，社区活跃，遇到问题很容易找到解决方案。不过，随着项目规模的增大，我开始感受到Vue在类型系统方面的不足。React的函数式编程范式对我来说有点难理解，但一旦掌握了就会觉得很强大。</p>
                                    </div>
                                    <div class="flex items-center mt-4 space-x-4">
                                        <button class="flex items-center text-gray-500 hover:text-red-500 transition-colors">
                                            <i class="fa fa-heart-o mr-1" aria-hidden="true"></i>
                                            <span>24</span>
                                        </button>
                                        <button class="flex items-center text-gray-500 hover:text-blue-500 transition-colors">
                                            <i class="fa fa-reply mr-1" aria-hidden="true"></i>
                                            <span>回复</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 评论 3 -->
                        <div class="bg-white rounded-xl p-6 shadow-sm">
                            <div class="flex">
                                <img src="https://picsum.photos/id/1062/100/100" alt="评论用户头像" class="w-10 h-10 rounded-full object-cover mr-4">
                                <div class="flex-grow">
                                    <div class="flex justify-between items-start">
                                        <div>
                                            <h4 class="font-medium text-gray-900">赵架构</h4>
                                            <p class="text-gray-500 text-sm">5天前</p>
                                        </div>
                                        <button class="text-gray-400 hover:text-gray-600 transition-colors">
                                            <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
                                        </button>
                                    </div>
                                    <div class="mt-2">
                                        <p class="text-gray-700">文章中没有提到Svelte，这是一个近年来备受关注的前端框架。与React、Vue和Angular不同，Svelte是一个编译器而不是运行时库，它在构建时将组件转换为高效的JavaScript代码，因此性能非常出色。对于性能敏感的应用，Svelte可能是一个不错的选择。</p>
                                    </div>
                                    <div class="flex items-center mt-4 space-x-4">
                                        <button class="flex items-center text-gray-500 hover:text-red-500 transition-colors">
                                            <i class="fa fa-heart-o mr-1" aria-hidden="true"></i>
                                            <span>19</span>
                                        </button>
                                        <button class="flex items-center text-gray-500 hover:text-blue-500 transition-colors">
                                            <i class="fa fa-reply mr-1" aria-hidden="true"></i>
                                            <span>回复</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 加载更多评论 -->
                    <div class="text-center mt-8">
                        <button class="bg-white hover:bg-gray-50 text-gray-700 font-medium px-6 py-3 rounded-lg border border-gray-200 transition-colors">
                            加载更多评论
                        </button>
                    </div>
                </div>
            </article>
            
            <!-- 侧边栏 -->
            <aside class="lg:w-1/3">
                <!-- 作者推荐 -->
                <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
                    <h3 class="text-xl font-bold text-gray-900 mb-4">作者推荐</h3>
                    <div class="space-y-4">
                        <a href="#" class="flex group">
                            <img src="https://picsum.photos/id/48/300/200" alt="推荐文章封面" class="w-20 h-20 rounded-lg object-cover mr-4">
                            <div>
                                <h4 class="font-medium text-gray-900 group-hover:text-blue-600 transition-colors line-clamp-2">WebAssembly：前端性能优化的新方向</h4>
                                <p class="text-gray-500 text-sm mt-1">2023-05-20</p>
                            </div>
                        </a>
                        <a href="#" class="flex group">
                            <img src="https://picsum.photos/id/0/300/200" alt="推荐文章封面" class="w-20 h-20 rounded-lg object-cover mr-4">
                            <div>
                                <h4 class="font-medium text-gray-900 group-hover:text-blue-600 transition-colors line-clamp-2">JavaScript性能优化：从理论到实践</h4>
                                <p class="text-gray-500 text-sm mt-1">2023-05-08</p>
                            </div>
                        </a>
                        <a href="#" class="flex group">
                            <img src="https://picsum.photos/id/180/300/200" alt="推荐文章封面" class="w-20 h-20 rounded-lg object-cover mr-4">
                            <div>
                                <h4 class="font-medium text-gray-900 group-hover:text-blue-600 transition-colors line-clamp-2">使用TypeScript重构大型JavaScript项目的经验分享</h4>
                                <p class="text-gray-500 text-sm mt-1">2023-04-25</p>
                            </div>
                        </a>
                    </div>
                </div>
                
                <!-- 相关文章 -->
                <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
                    <h3 class="text-xl font-bold text-gray-900 mb-4">相关文章</h3>
                    <div class="space-y-4">
                        <a href="#" class="flex group">
                            <img src="https://picsum.photos/id/1/300/200" alt="相关文章封面" class="w-20 h-20 rounded-lg object-cover mr-4">
                            <div>
                                <h4 class="font-medium text-gray-900 group-hover:text-blue-600 transition-colors line-clamp-2">Vue 3 vs React 18：性能对比与最佳实践</h4>
                                <p class="text-gray-500 text-sm mt-1">2023-06-05</p>
                            </div>
                        </a>
                        <a href="#" class="flex group">
                            <img src="https://picsum.photos/id/20/300/200" alt="相关文章封面" class="w-20 h-20 rounded-lg object-cover mr-4">
                            <div>
                                <h4 class="font-medium text-gray-900 group-hover:text-blue-600 transition-colors line-clamp-2">Angular 16新特性深度解析</h4>
                                <p class="text-gray-500 text-sm mt-1">2023-05-30</p>
                            </div>
                        </a>
                        <a href="#" class="flex group">
                            <img src="https://picsum.photos/id/25/300/200" alt="相关文章封面" class="w-20 h-20 rounded-lg object-cover mr-4">
                            <div>
                                <h4 class="font-medium text-gray-900 group-hover:text-blue-600 transition-colors line-clamp-2">前端状态管理：从Redux到Zustand</h4>
                                <p class="text-gray-500 text-sm mt-1">2023-05-15</p>
                            </div>
                        </a>
                        <a href="#" class="flex group">
                            <img src="https://picsum.photos/id/28/300/200" alt="相关文章封面" class="w-20 h-20 rounded-lg object-cover mr-4">
                            <div>
                                <h4 class="font-medium text-gray-900 group-hover:text-blue-600 transition-colors line-clamp-2">微前端架构实践与挑战</h4>
                                <p class="text-gray-500 text-sm mt-1">2023-05-02</p>
                            </div>
                        </a>
                    </div>
                </div>
                
                <!-- 标签云 -->
                <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
                    <h3 class="text-xl font-bold text-gray-900 mb-4">热门标签</h3>
                    <div class="flex flex-wrap gap-2">
                        <a href="#" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1.5 rounded-full text-sm transition-colors">JavaScript</a>
                        <a href="#" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1.5 rounded-full text-sm transition-colors">React</a>
                        <a href="#" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1.5 rounded-full text-sm transition-colors">Vue</a>
                        <a href="#" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1.5 rounded-full text-sm transition-colors">Angular</a>
                        <a href="#" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1.5 rounded-full text-sm transition-colors">TypeScript</a>
                        <a href="#" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1.5 rounded-full text-sm transition-colors">Webpack</a>
                        <a href="#" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1.5 rounded-full text-sm transition-colors">性能优化</a>
                        <a href="#" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1.5 rounded-full text-sm transition-colors">前端架构</a>
                        <a href="#" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1.5 rounded-full text-sm transition-colors">CSS</a>
                        <a href="#" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1.5 rounded-full text-sm transition-colors">HTML5</a>
                        <a href="#" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1.5 rounded-full text-sm transition-colors">WebAssembly</a>
                        <a href="#" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1.5 rounded-full text-sm transition-colors">测试</a>
                    </div>
                </div>
                
                <!-- 订阅 -->
                <div class="bg-gradient-to-br from-blue-600 to-indigo-700 rounded-xl p-6 text-white mb-8">
                    <h3 class="text-xl font-bold mb-3">订阅作者</h3>
                    <p class="mb-4 text-blue-100">获取张开发的最新文章和技术见解</p>
                    <form>
                        <div class="flex">
                            <input type="email" placeholder="您的邮箱地址" class="flex-grow px-4 py-2 rounded-l-lg text-gray-800 focus:outline-none">
                            <button type="submit" class="bg-white text-blue-600 hover:bg-blue-50 font-medium px-4 py-2 rounded-r-lg transition-colors">
                                订阅
                            </button>
                        </div>
                    </form>
                    <p class="text-xs text-blue-200 mt-3">我们尊重您的隐私，不会向第三方分享您的信息</p>
                </div>
            </aside>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-900 text-gray-400 mt-16">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-6">
                        <i class="fa fa-pencil-square-o text-2xl text-blue-400" aria-hidden="true"></i>
                        <span class="text-xl font-bold text-white">BlogHub</span>
                    </div>
                    <p class="mb-6">汇聚全网优质博客内容，让每一次阅读都有价值</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fa fa-twitter text-lg" aria-hidden="true"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fa fa-facebook text-lg" aria-hidden="true"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fa fa-instagram text-lg" aria-hidden="true"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fa fa-github text-lg" aria-hidden="true"></i></a>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-white font-bold mb-6">快速链接</h3>
                    <ul class="space-y-3">
                        <li><a href="#" class="hover:text-white transition-colors">首页</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">热门博客</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">最新发布</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">博客分类</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">关于我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-white font-bold mb-6">资源</h3>
                    <ul class="space-y-3">
                        <li><a href="#" class="hover:text-white transition-colors">提交博客</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">作者指南</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">社区规则</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">常见问题</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">联系支持</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-white font-bold mb-6">联系我们</h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-envelope-o mt-1 mr-3" aria-hidden="true"></i>
                            <span>contact@bloghub.com</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-3" aria-hidden="true"></i>
                            <span>北京市朝阳区创意园区A座1001室</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-phone mt-1 mr-3" aria-hidden="true"></i>
                            <span>+86 10 8888 7777</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
                <p>&copy; 2023 BlogHub. 保留所有权利</p>
                <div class="flex space-x-6 mt-4 md:mt-0">
                    <a href="#" class="hover:text-white transition-colors">隐私政策</a>
                    <a href="#" class="hover:text-white transition-colors">服务条款</a>
                    <a href="#" class="hover:text-white transition-colors">Cookie 政策</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button id="back-to-top" class="fixed bottom-6 right-6 bg-blue-600 hover:bg-blue-700 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg transition-all duration-300 opacity-0 invisible">
        <i class="fa fa-arrow-up" aria-hidden="true"></i>
    </button>

    <!-- JavaScript -->
    <script>
        // 移动端菜单切换
        const menuToggle = document.getElementById('menu-toggle');
        const mobileMenu = document.getElementById('mobile-menu');
        
        menuToggle.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });
        
        // 导航栏滚动效果
        const header = document.querySelector('header');
        let lastScrollTop = 0;
        
        window.addEventListener('scroll', () => {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            
            if (scrollTop > 50) {
                header.classList.add('shadow');
                header.classList.remove('shadow-sm');
            } else {
                header.classList.remove('shadow');
                header.classList.add('shadow-sm');
            }
            
            lastScrollTop = scrollTop;
        });
        
        // 返回顶部按钮
        const backToTopButton = document.getElementById('back-to-top');
        
        window.addEventListener('scroll', () => {
            if (window.pageYOffset > 300) {
                backToTopButton.classList.remove('opacity-0', 'invisible');
                backToTopButton.classList.add('opacity-100', 'visible');
            } else {
                backToTopButton.classList.add('opacity-0', 'invisible');
                backToTopButton.classList.remove('opacity-100', 'visible');
            }
        });
        
        backToTopButton.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    targetElement.scrollIntoView({
                        behavior: 'smooth'
                    });
                }
            });
        });
        
        // 评论回复功能
        document.querySelectorAll('.fa-reply').forEach(replyButton => {
            replyButton.parentElement.addEventListener('click', function() {
                const commentContainer = this.closest('.bg-white');
                const replyForm = document.createElement('div');
                replyForm.className = 'mt-4 ml-10 pl-4 border-l-2 border-gray-100';
                replyForm.innerHTML = `
                    <div class="flex">
                        <img src="https://picsum.photos/id/177/100/100" alt="用户头像" class="w-8 h-8 rounded-full object-cover mr-3">
                        <div class="flex-grow">
                            <textarea placeholder="回复..." class="w-full border border-gray-200 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none" rows="2"></textarea>
                            <div class="flex justify-end items-center mt-2">
                                <button class="text-gray-500 hover:text-gray-700 transition-colors mr-3">取消</button>
                                <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-1.5 rounded-lg transition-colors">回复</button>
                            </div>
                        </div>
                    </div>
                `;
                
                // 如果已有回复框，则移除
                const existingReplyForm = commentContainer.querySelector('.mt-4.ml-10');
                if (existingReplyForm) {
                    existingReplyForm.remove();
                }
                
                // 添加回复框
                this.parentElement.after(replyForm);
                
                // 取消回复
                replyForm.querySelector('.text-gray-500').addEventListener('click', () => {
                    replyForm.remove();
                });
                
                // 提交回复
                replyForm.querySelector('.bg-blue-600').addEventListener('click', () => {
                    const replyText = replyForm.querySelector('textarea').value;
                    if (replyText.trim() === '') return;
                    
                    // 创建新回复
                    const newReply = document.createElement('div');
                    newReply.className = 'mt-4 ml-10 pl-4 border-l-2 border-gray-100';
                    newReply.innerHTML = `
                        <div class="flex">
                            <img src="https://picsum.photos/id/177/100/100" alt="回复用户头像" class="w-8 h-8 rounded-full object-cover mr-3">
                            <div class="flex-grow">
                                <div class="flex justify-between items-start">
                                    <div>
                                        <h4 class="font-medium text-gray-900">我</h4>
                                        <p class="text-gray-500 text-sm">刚刚</p>
                                    </div>
                                    <button class="text-gray-400 hover:text-gray-600 transition-colors">
                                        <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
                                    </button>
                                </div>
                                <div class="mt-2">
                                    <p class="text-gray-700">${replyText}</p>
                                </div>
                                <div class="flex items-center mt-4 space-x-4">
                                    <button class="flex items-center text-gray-500 hover:text-red-500 transition-colors">
                                        <i class="fa fa-heart-o mr-1" aria-hidden="true"></i>
                                        <span>0</span>
                                    </button>
                                    <button class="flex items-center text-gray-500 hover:text-blue-500 transition-colors">
                                        <i class="fa fa-reply mr-1" aria-hidden="true"></i>
                                        <span>回复</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    `;
                    
                    // 添加新回复并清空回复框
                    replyForm.before(newReply);
                    replyForm.remove();
                    
                    // 为新回复添加回复功能
                    newReply.querySelector('.fa-reply').parentElement.addEventListener('click', function() {
                        // 这里可以复用上面的回复逻辑
                    });
                });
            });
        });
    </script>
</body>
</html>